import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { alertDispatch } from '@/utils'
import CheckLogin from '@/components/CheckLogin'
import { homeApi } from '@/Api'
import { useHistory } from 'react-router-dom'
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import './home.less'
import bannerImg from '@/assets/images/home/xiaolang.png'
import ExamListItem from '@/components/ExamListItem'
import examImg from '@/assets/images/home/examination.png'
import booksImg from '@/assets/images/home/books.png'
import practiceImg from '@/assets/images/home/practice.png'
// import { ERROR, SUCCESS, WARNING, INFO } from '@/components/FAlert/alertTypes'
function Home(props) {
    const history = useHistory()
    const [title, setTitle] = useState("")
    const [wrong, setWrong] = useState(0)
    const [collect, setCollect] = useState(0)
    const [study, setStudy] = useState(0)
    const [exemItems, setExemItems] = useState([])
    const [total, setTotal] = useState(0)
    const [actionCode, setActionCode] = useState('')
    // eslint-disable-next-line
    useEffect(async () => {
        try {
            const res = await homeApi()
            const { exam, wrong, collect, study, exemItems } = res.data
            const { actionCode } = exam
            if (res.errCode === 0) {
                setTitle(exam.title)
                setWrong(wrong)
                setCollect(collect)
                setStudy(study)
                setExemItems(exemItems)
                setTotal(exam.itemCount)
                setActionCode(actionCode)
            }

        } catch (err) {
            if (err) {
                if (err.response.data.errCode === 1002) {
                    // 重新登录
                    props.error(err.response.data.message)
                    history.push('/login')
                }
            }
            console.dir(err);

        }
    }, [])

    function goToSetSub() {
        history.push({
            pathname: '/sub',
            state: {
                actionCode,
                title
            }
        })
    }

    return (
        <div className="home">
            <div className="top-header">
                <h2>{title}</h2>
                <div className="change-subject">
                    <span onClick={goToSetSub}>切换考试科目</span>
                    <ArrowRightIcon />
                </div>

            </div>
            <div className="banner">
                <div className="banner-img">
                    <img src={bannerImg} alt="" />
                </div>
                <div className="info">
                    <p className="calc">
                        <span>已学{study}题</span>  |  <span>共{total}题</span>
                    </p>
                    <p className="info-bot">
                        <span>
                            <span className="num">{wrong}</span>
                            <span>错题</span>
                        </span>
                        <span>
                            <span className="num">{collect}</span>
                            <span>收藏</span>
                        </span>
                    </p>
                </div>
            </div>
            <div className="three-img">
                <img src={examImg} alt="" />
                <img src={booksImg} alt="" />
                <img src={practiceImg} alt="" />
            </div>
            <div className="flex sub-wrap">
                <h3 className="sub-db">学科题库</h3>
                <span className="sub-desc">坚持每一天,成长看得见</span>
            </div>
            <div className="exam-list">
                {
                    exemItems.map(item => {
                        return (
                            <ExamListItem key={item.actionCode} data={item}></ExamListItem>
                        )
                    })
                }
            </div>
        </div>
    )
}
// 使用react-redux
// 通过高阶组件来实现不同页面的登录验证
export default connect(null, alertDispatch)(CheckLogin(Home))